<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料</title>
  <style>
    .headerInformation {
      width: 90%;
      height: auto;
      background-color: #f8e3c5;
      margin: 15px auto;
      padding: 20px;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: grid;
          grid-template-columns: 1fr 3fr;
          grid-template-rows: auto auto;
    }

    .headerimg {
      flex-grow: 1;
    }

    .headerimg img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-bottom: 10px;
    }

    .headerimg div {
      font-size: 18px;
      font-weight: bold;
    }

    .info {
      flex-grow: 3;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(30px, auto);
      gap: 10px;
      background-color: aqua;
    }

    .infoleft {
      
      justify-self: center;
    }
    .inforight {
      
      justify-self: center;
    }

    .info div {
      width: auto;
      padding: 5px;
      box-sizing: border-box;
    }

    .headright {
      flex-grow: 1;
      background-color: coral;
    }

    @media (max-width: 600px) {
      .info {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <div class="headerInformation">
    <div class="headerimg">
      <img src="logo.png" alt="个人头像">
      <div>朱鹏飞</div>
    </div>
    <div class="info">
      <div class="infoleft">
        <div>性别: 男</div>
        <div>年龄: 7</div>
        <div>手机号: 13910056081</div>
        <div>账户: VVIP202210027</div>
      </div>
      <div class="inforight">
        <div>开通时间: 2022-10-09</div>
        <div>到期时间: 2032-10-31</div>
        <div>剩余天数: 1565天</div>
        <div>已训练天数: 295天</div>
      </div>
    </div>
    <!-- 空格占位符。 -->
    <div class="headright">&nbsp;</div>
  </div>
</body>

</html>